<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>超市账单管理系统</title>
    <link rel="stylesheet" href="css/public.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="./js/jquery-3.5.1.js"></script>
    <script src="./js/getToken.js"></script>
    <script src="./js/userUpdate.js"></script>
  </head>
  <body>
    <!--头部-->
    <header class="publicHeader">
      <h1>超市账单管理系统</h1>

      <div class="publicHeaderR">
        <p>
          <span>下午好！</span
          ><span style="color: #fff21b" class="username"> Admin</span> ,
          欢迎你！
        </p>
        <a href="javascript:void(0)" class="logout">退出</a>
      </div>
    </header>
    <!--时间-->
    <section class="publicTime">
      <span id="time">2015年1月1日 11:11 星期一</span>
      <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
    </section>
    <!--主体内容-->
    <section class="publicMian">
      <div class="left">
        <h2 class="leftH2">
          <span class="span1"></span>功能列表 <span></span>
        </h2>
        <nav>
          <ul class="list">
            <li><a href="billList.html">账单管理</a></li>
            <li><a href="providerList.html">供应商管理</a></li>
            <li id="active"><a href="userList.html">用户管理</a></li>
            <li><a href="password.html">密码修改</a></li>
            <li><a href="javascript:void(0)" class="logout">退出系统</a></li>
          </ul>
        </nav>
      </div>
      <div class="right">
        <div class="location">
          <strong>你现在所在的位置是:</strong>
          <span>用户管理页面 >> 用户修改页面</span>
        </div>
        <div class="providerAdd" class="updateForm">
          <div action="#">
            <!--div的class 为error是验证错误，ok是验证成功-->
            <div>
              <label for="userName">用户名称：</label>
              <input
                type="text"
                name="userName"
                id="userName"
                placeholder="韩露"
              />
              <span>*</span>
            </div>
            <div>
              <label for="gender">用户性别：</label>
              <select name="gender" id="gender">
                <option value="1">男</option>
                <option value="2" selected>女</option>
              </select>
            </div>
            <div>
              <label for="birthday">出生日期：</label>
              <input
                type="text"
                name="birthday"
                id="birthday"
                placeholder="2016年2月1日"
              />
              <span>*</span>
            </div>
            <div>
              <label for="phone">用户电话：</label>
              <input
                type="text"
                name="phone"
                id="phone"
                placeholder="13533667897"
              />
              <span>*</span>
            </div>
            <div>
              <label for="address">用户地址：</label>
              <input
                type="text"
                name="address"
                id="address"
                placeholder="北京"
              />
            </div>
            <div>
              <label>用户类别：</label>
              <input
                type="radio"
                name="userRole"
                class="userRole"
                value="1"
              />管理员
              <input
                type="radio"
                name="userRole"
                class="userRole"
                value="2"
                checked
              />经理
              <input
                type="radio"
                name="userRole"
                class="userRole"
                value="3"
              />普通用户
            </div>
            <div class="providerAddBtn">
              <input type="button" value="保存" class="update-btn" />
              <input type="button" value="返回" class="reset-btn" />
            </div>
          </div>
        </div>
      </div>
    </section>
    <footer class="footer">版权归北大青鸟</footer>
    <script src="js/time.js"></script>
    <script>
      $(function () {
        //1、路由守卫
        let token = getToken().token
        if (!token) {
          return (location = 'login.html')
        }

        //2、修改用户名
        let username = getToken().username
        $('.username').html(username)

        //3、退出登录
        $('.logout').click(function () {
          sessionStorage.clear()
          location = 'login.html'
        })
      })
    </script>
  </body>
</html>
